/**
 * 金融平台 H5 设计色系统
 * 红色主题配色
 */

// 主色调 - 红色系
export const primary = {
  main: '#dc2626',      // 主红色 - 主要按钮、链接、品牌色
  light: '#ef4444',     // 浅红色 - 悬停状态、次要元素
  lighter: '#fecaca',   // 淡红色 - 背景装饰、渐变
  dark: '#991b1b',      // 深红色 - 深色状态
}

// 强调色 - 橙红色
export const accent = {
  main: '#f97316',      // 橙色 - 重要提示、高亮
  dark: '#ea580c',      // 深橙色 - 阴影
}

// 文本色
export const text = {
  primary: '#1f2937',   // 主文本 - 标题、正文
  secondary: '#6b7280', // 次要文本 - 描述、提示
  tertiary: '#9ca3af',  // 三级文本 - 辅助说明
}

// 背景色
export const bg = {
  primary: '#FFFFFF',   // 主背景 - 卡片、页面
  secondary: '#f9fafb', // 次要背景 - 区域分隔
  tertiary: '#e5e7eb',  // 边框、分隔线
}

// 状态色
export const status = {
  success: '#10b981',   // 成功
  warning: '#f59e0b',   // 警告
  error: '#ef4444',     // 错误
  info: '#3b82f6',      // 信息
}

// 渐变色
export const gradients = {
  primary: `linear-gradient(135deg, ${primary.main} 0%, ${primary.light} 100%)`,
  accent: `linear-gradient(135deg, ${accent.main} 0%, ${accent.dark} 100%)`,
  card: `linear-gradient(135deg, ${primary.main} 0%, ${accent.main} 100%)`,
  soft: `linear-gradient(to bottom right, #fee2e2, #fecaca)`,
}

// 阴影
export const shadows = {
  sm: '0 1px 2px 0 rgba(220, 38, 38, 0.05)',
  md: '0 4px 6px -1px rgba(220, 38, 38, 0.1)',
  lg: '0 10px 15px -3px rgba(220, 38, 38, 0.1)',
  xl: '0 20px 25px -5px rgba(220, 38, 38, 0.1)',
}

// 导出完整的设计系统
export const designSystem = {
  primary,
  accent,
  text,
  bg,
  status,
  gradients,
  shadows,
}

export default designSystem
